<template>
  <div class="login-container">
    <div class="login-box">
      <h2 class="login-title">中信银行实习平台</h2>
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        @submit.native.prevent="handleLogin"
      >
        <el-form-item prop="mobile">
          <el-input
            v-model="loginForm.mobile"
            placeholder="请输入手机号"
            prefix-icon="el-icon-user"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            native-type="submit"
            class="login-btn"
            :loading="loading"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '@/utils/request'
import { setToken } from '@/utils/auth'

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        mobile: '17688889999', // 默认值方便测试
        password: '123456'
      },
      loginRules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          login(this.loginForm.mobile, this.loginForm.password)
            .then(response => {
              // 1. 存储token
              setToken(response.data.token)

              // 2. 跳转到首页
              this.$router.push({ path: '/' })

              // 3. 显示成功提示
              this.$message.success('登录成功')
            })
            .catch(error => {
              console.error('登录失败:', error)
                const errorMessage = error.response?.data?.message || error.message || '登录失败'
              this.$message.error(error.message || '登录失败')
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f2f5;

  background-size: cover;

  .login-box {
    width: 400px;
    padding: 40px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

    .login-title {
      margin-bottom: 30px;
      text-align: center;
      color: #333;
      font-size: 24px;
      font-weight: 500;
    }

    .login-btn {
      width: 100%;
      margin-top: 10px;
    }

    ::v-deep .el-input__inner {
      height: 45px;
      line-height: 45px;
    }
  }
}
</style>
